<template>


    <div class="citysort-box">
        <h2>字母排序</h2>
             <ul class="citysort-list">
            <li v-for="(letters,index) in letter" :key="index" @click="clickSort" ><a href="javascript:void(0)" >{{letters}}</a></li>

        </ul>
        

    </div>



    
</template>


<script>

export default {
    name:'Citysort',
    props:['letter'],
    methods:{
        clickSort(e){

           // console.log(e.target.innerText)
            this.$emit('change',e.target.innerText)

        }
    }


}

</script>

<style lang="stylus" scoped>
    .citysort-box
        margin-top:100px
        h2
            margin:12px 15px
    .citysort-list
        padding:15px 0
        background:#fff
        overflow:hidden
        li
          width:16.66%
          text-align:center
          line-height:45px
          float:left

          


</style>
